<template>
	<div class="login">
		<img class="l_logo" :src="myApp.srcPath('logo.png')" mode=""></img>
		
		<div class="l_iptViewAll">
		
			<!-- 登陆 -->
			<transition name="fold-right">
				<div class="l_iptView" v-if="loginType == 0">
					
					<div class="liv_item">
						<img :src="myApp.srcPath('iphon.png')" alt="">
						<input placeholder="请输入登录手机账号" type="text" value="" v-model="phone" />
					</div>
					
					<div class="liv_item">
						<img :src="myApp.srcPath('password.png')" alt="">
						<input placeholder="请输入登录密码" type="password" value="" v-model="password" />
					</div>
					
					<div class="l_loginDiv" @click="login()">
						<div class="l_login">
							登陆
						</div>
					</div>
					
					<div class="l_reg" @click="changeType(1)">注册</div>
				</div>
			</transition>
			
			<!-- 注册 -->
			<transition name="fold-left">
				<div class="l_iptView" v-if="loginType == 1">
					
					<div class="liv_item">
						<img :src="myApp.srcPath('iphon.png')" alt="">
						<input placeholder="请输入登录手机账号" type="text" value="" v-model="phone" />
					</div>
					
					<!-- <div class="liv_item">
						<img :src="myApp.srcPath('verification.png')" alt="">
						<input placeholder="请输入验证码" type="text" value="" v-model="code" />
						<div v-if="codeStatus" class="getCode" @click="getCode">获取</div>
						<div v-if="!codeStatus" class="getCodes">{{codeTime}}S</div>
					</div> -->
					
					<div class="liv_item">
						<img :src="myApp.srcPath('password.png')" alt="">
						<input placeholder="请设置登陆密码" type="password" value="" v-model="password"/>
					</div>
					
					<div class="liv_item">
						<img :src="myApp.srcPath('invitation.png')" alt="">
						<input placeholder="邀请码" type="text" value="" v-model="invitation"/>
					</div>
					
					<div class="l_loginDiv" @click="register()">
						<div class="l_login">
							注册
						</div>
					</div>
					
					<div class="r_log" >已有帐户？<span @click="changeType(0)">返回登录</span></div>
				</div>
			</transition>
			
			<!-- 忘记密码 -->
			<transition name="fold-left">
				<div class="l_iptView" v-if="loginType == 2">
					
					<div class="liv_item">
						<img :src="myApp.srcPath('iphon.png')" alt="">
						<input placeholder="请输入登录手机账号" v-model="phone" type="text" value="" />
					</div>
					
					<div class="liv_item">
						<img :src="myApp.srcPath('verification.png')" alt="">
						<input placeholder="请输入验证码" type="text" value="" v-model="code" />
						<div v-if="codeStatus" class="getCode" @click="getCode">获取</div>
						<div v-if="!codeStatus" class="getCodes">{{codeTime}}S</div>
					</div>
					
					<div class="liv_item">
						<img :src="myApp.srcPath('password.png')" alt="">
						<input placeholder="请设置新的登陆密码" v-model="password" type="password" value="" />
					</div>
					
					<div class="liv_item">
						<img :src="myApp.srcPath('password.png')" alt="">
						<input placeholder="请确认新的登陆密码" v-model="repassword" type="password" value="" />
					</div>
					
					<div class="l_loginDiv" @click="changePassword">
						<div class="l_login">
							提交
						</div>
					</div>
					
					<div class="r_log" >已有帐户？<span @click="changeType(0)">返回登录</span></div>
				</div>
			</transition>
		
		</div>
		
		<!-- 登录底部记密码 -->
		<transition name="fold-left">
			<!-- <div @click="loginType = 2" v-if="loginType == 0" class="forgetPassword" style="">忘记密码？</div> -->
			<div @click="$router.push('/Kefu')" v-if="loginType == 0" class="forgetPassword" style="">忘记密码？</div>
		</transition>
		
		<img onclick="return false" class="l_bot" :src="myApp.srcPath('login-bot.png')" alt="">
	</div>
</template>

<script>
	//引入vant 框架的 button 组件
	import Button from 'vant/lib/button';
	import 'vant/lib/button/style';
	import Vue from 'vue';
	import { Toast } from 'vant';

	Vue.use(Toast);
	Vue.use(Button);
	
	import {Login,Register,SendRegVerify,FindLoginPassword} from '../serve/api.js'
	
	export default{
		name: 'Login',
		created(){
			
			if (process.env.NODE_ENV == 'development') {
				
				// this.$router.push('/Home')
			
			} else {
			
			}
			  
			console.log(this.$route.query.id)
			
			this.invitation = this.$route.query.id
			
		},
		data(){
			return{
				//0登陆  1注册  2找回密码
				loginType:0,
				
				//手机号码
				phone:'',
				
				//密码
				password:'',
				
				//邀请码
				invitation:'',
				
				//确认密码
				repassword:'',
				
				//验证码
				code:'',
				
				//验证码状态
				codeStatus:true,
				
				//获取验证码倒计时
				codeTime:60,
				
				verification:{
					
					//手机号码过滤
					login:() => {
						
						//手机号码
						if(!/^1[3-9]\d{9}$/.test(this.phone)){
						
							Toast("请填写正确的手机号码");
						
							return true
							
						}
						
					},
					
					//密码过滤
					password:() => {
						
						if(this.password.trim().length < 6){
						
							Toast("请填写正确的密码格式");
						
							return true
							
						}
						
					},
					
					//验证码过滤
					code:() => {
						
						if(this.code.trim().length < 4 || this.code.trim().length > 6){
						
							Toast("请填写正确的验证码");
						
							return true
							
						}
						
					},
					
					//确认密码过滤
					repassword:() => {
						
						if(this.password != this.repassword){
						
							Toast("重复密码必须相同");
						
							return true
							
						}
						
					},
					
					//邀请码过滤
					invitation:() => {
						
						if(this.invitation < 4){
						
							Toast("请填写正确的邀请码");
						
							return true
							
						}
						
					}
					
					
				}
				
			}
		},
		methods:{
			
			//修改密码
			changePassword(){
				
				if(this.verification.login()){return}
				
				if(this.verification.code()){return}
				
				if(this.verification.password()){return}
					
				if(this.verification.repassword()){return}
			
				let params = {
					
					phone: this.phone,
					
					password: this.password,
					
					repassword: this.repassword,
					
					verify: this.code
					
				}
				
				
				FindLoginPassword(params,(res) => {
					
					// console.log(res)
					
					Toast(res.data.msg);
					
					if(res.data.code == 1){
						
						this.loginType = 0
						
					}
					
				},(error) => {
					
					Toast('网络繁忙，请稍候再试');
					
				})
				
			},
			
			//注册
			register(){
				
				if(this.verification.login()){return}
				
				// if(this.verification.code()){return}
				
				if(this.verification.password()){return}
					
				if(this.verification.invitation()){return}
					
				let params = {
					
					mobile: this.phone,
					
					user_pass: this.password,
					
					code: this.code,
					
					invitation: this.invitation
					
				}
				
				// console.log(params)
				
				Register(params,(res) => {
					
					Toast(res.data.msg);
					
					if(res.data.code == 1){
						
						this.loginType = 0
						
					}
					
				},(error) => {
						
					Toast('网络繁忙，请稍候再试');
					
				})
				
			},
			
			//获取验证码
			getCode(){
				
				if(this.verification.login()){return}
				
				let params = {
					
					phone: this.phone
					
				}
				
				SendRegVerify(params,(res) =>{
					
					Toast(res.data.msg);
					
					if(res.data.code == 1){
						
						this.codeStatus = false
						
						let codeSI = setInterval( () => {
							
							this.codeTime --
							
							if(this.codeTime <= 0){
								
								this.codeStatus = true
								
								this.codeTime = 60
								
								clearInterval(codeSI)
								
							}
							
						},1000)
						
					}
					
				},(error) => {
					
					Toast('网络繁忙，请稍候再试');
					
				})
				
				
				
			},
			
			//登录
			login(){
				
				if(this.verification.login()){return}
				
				if(this.verification.password()){return}
				
				Toast.loading({
				  message: '正在登陆...',
				  forbidClick: true,
				  duration:0
				});
				
				let params = {
					
					phone: this.phone,
					
					pwd: this.password
					
				}
				
				// console.log(params)
				
				Login(params,(res) => {
					
					Toast(res.data.msg);
					
					if(res.data.code == 1){
						
						this.$router.push('/Home')
						
					}
					
				},(error) => {
					
					Toast('网络繁忙，请稍候再试');
					
				})
				
				// setTimeout(() => {
					
				// 	Toast('登陆成功');
					
				// 	this.$router.push('/home')
					
				// },1500)
				
				
			},
			
			changeType(type){
				
				this.loginType = type
				
			}
		
		}
		
	}
</script>

<style scoped="">
	.r_log span{
		color: #1D58FF;
		font-size: .26rem;
	}
	
	.r_log{
		margin-top: .34rem;
		text-align: center;
		font-size: .26rem;
		color: #999999;
	}
	
	.l_iptViewAll{
		width: 6.21rem;
		margin: auto;
		margin-top: .65rem;position: relative;
		z-index: 2;
		background-color: white;
	}
	
	.getCode{
		color: #1D58FF;
		text-decoration:underline;
		font-size: .26rem;
	}
	
	.getCodes{
		color: #1D58FF;
		font-size: .26rem;
	}
	
	.forgetPassword{
		width: 100%;
		text-align: center; 
		position: fixed;
		bottom: 2.3rem; 
		color: #999999;
		font-size: .26rem;
	}
	
	.l_reg{
		font-size: .26rem;
		text-align: center;
		margin-top: .34rem;
		color: #1D58FF;
	}
	
	.l_login:active{
		background:rgba(29,88,255,.5);
		transition: all .2s;
		width:3.6rem;
		height:.56rem;
		/* margin-top: 1.18rem; */
		font-size: .28rem;
	}
	
	.l_login:focus{
		transition: all .2s;
		background:rgba(29,88,255,1);
	}
	
	.l_login{
		transition: all .2s;
		width:3.8rem;
		height:.66rem;
		background:rgba(29,88,255,1);
		border-radius:.33rem;
		display: flex;
		align-items: center;
		justify-content: center;
		color: white;
		font-size: .32rem;
	}
	
	.l_loginDiv{
		margin: auto;
		margin-top: 1.12rem;
		display: flex;
		align-items: center;
		justify-content: center;
		width:3.8rem;
		height:.66rem;
	}
	
	.liv_item input::placeholder{
		color: #C4C3C3;
	}
	
	.liv_item input{
		background-color: transparent;
		font-size: .28rem;
	}
	
	.liv_item img{
		margin-right: .43rem;
		width: .5rem;
		height: .5rem;
	}
	
	.liv_item{
		padding: .58rem .19rem .25rem .8rem;
		box-sizing: border-box;
		display: flex;
		align-items: center;
		width: 100%;
		border-bottom: 1px solid #DFDFDF;
	}
	
	.l_iptView{
		position: absolute;
		width: 6.21rem;
		margin: auto;
		margin-top: .65rem;
	}
	
	.l_bot{
		position: absolute;
		bottom: 0;
		width: 100%;
		z-index: 1;
	}
	
	.l_logo{
		width: 1.86rem;
		height: 1.86rem;
		margin: auto;
		margin-top: 1.77rem;
		display: block;
	}
	
	.login{
		position: absolute;
		width: 100%;
		height: 100%;
		/* background-color: dodgerblue; */
	}
</style>
